<template>
	<view>
		<u-navbar :border-bottom="false">
		</u-navbar>
		<view class="u-flex u-row-between u-m-x-30 u-p-b-20 lurk">
			<text class="u-font-50">发布公告</text>
			<view class="u-p-x-30 u-p-y-10"><text class="u-font-32">发布</text></view>
		</view>
		<view class="head" :style="{top:`${navBar}px`}">
			<view class="u-flex u-row-between u-m-x-30 u-p-b-20">
				<text class="u-font-50 text-bold">发布公告</text>
				<view class="u-p-x-30 u-p-y-10 round bg-theme" @tap="publish">
					<text class="u-font-32">确定</text>
				</view>
			</view>
		</view>
		<view class="content-box">
			<textarea class="textarea" v-model="content" maxlength="2000" placeholder="请输入公告内容"></textarea>
			<view class="u-flex u-row-right u-m-t-10">
				<text class="text-gray u-font-28">{{content.length}}/2000 字</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { goback, toast } from '@/utils/util';
	import { addNotice, fetchNoticeDetail, modifyNotice } from '@/api/group';
	import {event} from "../bus.js"
	import chat, {
		msgTypes
	} from "@/IM/index.js" 
	import { ConversationType } from '@/entity/ConversationType.js';
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				id:'',
				gid:'',
				content:''
			};
		},
		computed:{
			...mapGetters('user',['userInfo']),
			...mapGetters('addr',['groups'])
		},
		onLoad({id,gid}) {
			this.gid = gid
			if(id){ 
				this.id = id
				this.restore()
			}
		},
		methods:{
			...mapActions('chat', ['sendMessage','saveHistory']),
			async restore(){
				const info = await fetchNoticeDetail(this.id)
				this.content = info.noticeContent
			},
			check(){
				if(!this.content){
					throw new Error('请输入公告内容')
				}
			},
			async sendNotice(id){
				const msg = chat.createMessage({
					chatType:ConversationType.Group,
					groupId:this.gid,
					content: '[群公告]',
					msgType: msgTypes.NOTICE,
					extras: {
						id:id,
						title:'',
						content:this.content,
					}
				})
				const group = this.groups.find((item)=>item.id == this.gid)
				if(group){
					msg.readBody = {readCount:0,unreadCount:group.userCount-1}
				}
				msg.avatar = this.userInfo.avatarUrl
				msg.nick = this.userInfo.userName
				msg.status = 'loading';
				msg.errMsg = ''
				try {
					await this.sendMessage({
						message: msg,
						id: this.gid
					})
					await chat.send(msg)
					msg.status = 'success';
					uni.$emit('chat_receive',this.gid,msg)
					this.saveHistory()
				} catch (e) {
					msg.status = 'error';
					msg.errMsg = e.message
					toast(e.message)
				}
			},
			async publish(){
				try{
					this.check()
					if(this.publish.lock){
						throw new Error('正在请求中')
					}
				}catch(e){
					return toast(e.message)
				}
				try{
					this.publish.lock = true
					if(this.id){
						await modifyNotice({
							id:this.id,
							gid:this.gid,
							content:this.content
						})
						this.sendNotice(this.id)
					}else{
						const {id} = await addNotice({
							gid:this.gid,
							content:this.content,
						})
						this.sendNotice(id)
					}
					event.$emit('notice_changed')
					goback()
				}finally{
					this.publish.lock = false
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.lurk{
		opacity: 0;
	}
	.head{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #FFFFFF;
	}
	
	.content-box{
		background-color: #F5F6FA;
		margin: 20rpx 30rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		.textarea{
			width: 100%;
			font-size: 32rpx;
			height: 500rpx;
		}
	}
</style>
